@import '../../../../utils.less';

.ui-group-page {
  flex: 1;

  ul,
  li {
    list-style: none;
  }

  .subtitle {
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 18px;
    color: @color-2;

    &::before {
      display: inline-flex;
      width: 6px;
      height: 18px;
      margin-right: 10px;
      background: @primary-color;
      content: '';
    }
  }

  .tree-no-data,
  .node-detail-no-data {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &-icon {
      width: 160px;
      height: 160px;
    }

    &-info {
      font-size: 14px;
      color: @color-2;
    }

    &-help {
      margin-top: 10px;
      font-size: 12px;
      color: @color-5;
    }
  }

  .node-detail-no-data {
    margin-top: 170px;

    &-icon {
      width: 270px;
      height: 270px;
    }
  }

  &-side {
    flex: none;
    width: 304px;
    padding: 30px 0;
    margin-right: 1px;
    background-color: @bg-2;

    .title {
      margin-bottom: 16px;
      font-weight: 600;
      font-size: 16px;
      line-height: 22px;
      color: @color-2;
    }
  }

  &-tree-group {
    .subtitle {
      font-size: 14px;

      &-wrapper {
        display: flex;
        flex: 1;
        justify-content: space-between;

        > h4 {
          width: 160px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .add {
        display: flex;
        align-items: center;
        cursor: pointer;

        .icon {
          margin-right: 6px;
        }
      }
    }
  }

  &-detail {
    padding: 30px 0;
    background-color: @bg-2;

    .title {
      display: flex;
      font-weight: 600;
      font-size: 22px;
      line-height: 32px;
      color: @color-2;
    }

    &-header {
      padding: 0 30px;

      button {
        margin-left: 16px;
      }
    }

    &-content {
      padding: 0 30px;
      margin-top: 40px;
      overflow-y: auto;

      .group-list-block {
        ul {
          padding-left: 20px;

          li {
            justify-content: space-between;
            align-items: center;
            height: 33px;
            padding: 0 8px;
            font-size: 14px;
            color: @color-2;
            cursor: pointer;

            &:not(:last-child) {
              border-bottom: 1px solid @bg-1;
            }

            &:hover {
              background: @bg-3;
            }
          }
        }
      }

      .user-list-block {
        margin-top: 30px;
      }
    }
  }
}
